<template>
  <div>
    <el-button @click="openDialog">打开弹窗</el-button>
    <dialog-vmodel v-model="dialogVisible"></dialog-vmodel>

    <h3>v-model在vue2.x中的使用方式</h3>
    <duPre :code="code0"></duPre>

    <h3>v-model在vue3.x中的使用方式</h3>
    <duPre :code="code1"></duPre>
    <duPre :code="code2"></duPre>

    <h3>例子</h3>
    <p>我是父组件： {{ title }}</p>
    <menu2Child1 v-model="title"></menu2Child1>

    <h3>v-model带参数</h3>
  </div>
</template>

<script setup>
import dialogVmodel from './dialogs/dialogVmodel.vue'
import menu2Child1 from './components/menu2Child1.vue'

const dialogVisible = ref(false)

const openDialog = () => {
  dialogVisible.value = true
}

const code0 = `
  <ChildComponent v-model="title" />
  等同于
  <ChildComponent :value="title"  @input="title=$event" />

  也就是说，它实际上是传递一个属性value，然后接收一个input事件。
  `

const code1 = `
  <ChildComponent v-model="title" />
  等同于
  <ChildComponent :modelValue="title"  @update:modelValue="title=$event">

  vue3中v-model绑定的不再是value，而是modelValue，接收的方法也不再是input，而是update:modelValue
  `

const code2 = `
   在子组件中写法:
    <input type="text" :value="modelValue"  @input="onNameInput">
    export default {
      name: 'Menu2Child1',
      props: {
        modelValue: {
          type: String,
          default: ""
        },
      },
      setup(props, context) {
        const onNameInput = (e) => {
          context.emit('update:modelValue', e.target.value)
        }
        return {
          onNameInput,
        }
      },
    }
  `

const title = ref('123')
</script>

<style scoped>
h3 {
  margin: 20px 0 10px 0;
}
</style>
